<template>
  <div ref="lineChartRef" class="flex items-center justify-center">
    暂无数据
  </div>
</template>

<script setup lang="tsx">
import { nextTick, useTemplateRef, watch } from 'vue';
import * as eCharts from 'echarts';

const lineChartRef = useTemplateRef('lineChartRef');

const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});

const renderChart = () => {
  if (!props.dataList.length) return;

  const _xAxis = [];
  const _data = [];
  props.dataList?.forEach((item: any) => {
    _xAxis.push(item.date);
    _data.push(+item.free + +item.structure);
  });

  const option = {
    tooltip: {
      trigger: 'axis', // 悬浮在 x 轴线上时显示所有系列数据
      axisPointer: {
        type: 'line', //提示线，可以改成 shadow 或 cross
      },
    },
    grid: {
      top: '10%',
      left: '10%',
      bottom: '14%', // 调整底部留白，单位是像素
      right: 0,
    },
    xAxis: {
      type: 'category',
      // boundaryGap: false,
      axisTick: {
        show: false, // 隐藏刻度线
      },
      axisLine: {
        lineStyle: {
          type: 'dashed', // 设置轴线为虚线
        },
      },
      axisLabel: {
        color: '#fff', // x轴标签字体颜色（红色）
        fontSize: 14, // 可选，字体大小
      },
      data: _xAxis,
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      // 显示分割线虚线
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,.3)',
        },
      },
      axisLabel: {
        color: '#fff', // x轴标签字体颜色（红色）
        fontSize: 14, // 可选，字体大小
      },
    },
    series: [
      {
        data: _data,
        type: 'line',
        showSymbol: false, // 隐藏折线上的点
        lineStyle: {
          color: '#38C3FF', // 线条颜色
        },
        itemStyle: {
          color: '#38C3FF', // 控制线条和 tooltip 原点颜色
        },
        // 填充区域
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(56,195,255,0.8)' }, // 顶部颜色
              { offset: 1, color: 'rgba(56,195,255,0)' }, // 底部透明
            ],
          },
        },
      },
    ],
  };
  const chart = eCharts.init(lineChartRef.value);
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};

watch(
  () => props.dataList,
  () => {
    nextTick(() => {
      renderChart();
    });
  },
);
</script>

<style lang="scss" scoped></style>
